<template>
  <div class="courseContentList">
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in courselist" :key="item.id" @click="handleCourseInfo(item.id)">
        <div class="left-img">
          <van-image
            :src="item.courseImgUrl || item.image || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
          />
        </div>
        <div class="right-content">
          <h3>{{item.courseName || item.name }}</h3>
          <p class="preview">{{item.previewFirstField}}</p>
          <!-- 根据接口,当未购买商品时,是有价格的, 根据有无价格来展示 -->
          <p class="price-container" v-if="item.price">
            <span class="price-discounts">{{item.discounts}}</span>
            <span class="price">￥{{item.price}}</span>
          </p>
        </div>
      </van-cell>
    </van-list>
   </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List, Cell, Image, Toast } from 'vant'
export default {
  name: 'courseContentList',
  components: {
    VanPullRefresh: PullRefresh,
    VanCell: Cell,
    VanList: List,
    VanImage: Image
  },
  props: {
    // 用于接收父组件传递过来的接口数据
    fetchData: {
      type: Function,
      require: true
    }
  },
  data () {
    return {
      // 存储列表信息
      courselist: [],
      // 是否正在加载
      loading: false,
      // 是否已经完成
      finished: false,
      // 当前所在页
      currentPage: 1,
      // 是否刷新页面
      refreshing: false
    }
  },
  methods: {
    async onLoad () {
      if (this.refreshing) {
        // 在刷新时应该让当前页数始终是第一页
        this.currentPage = 1
        this.courselist = []
        this.refreshing = false
      }
      const { data } = await this.fetchData({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.courselist.push(...data.data.records)
      } else if (data.content && data.content.length !== 0) {
        this.courselist.push(...data.content)
      }
      // 当前页+1 继续向后请求
      this.currentPage++
      // 加载未完成
      this.loading = false
      // 如果加载的数据不满10时,完成加载
      if (data.data && data.data.records && data.data.records.length < 10) {
        this.finished = true
      } else if (data.content && data.content.length < 10) {
        this.finished = true
      }
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      this.loading = true
      this.onLoad()
      Toast.success('刷新成功')
    },
    handleCourseInfo (id) {
      this.$router.push({ name: 'course-info', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.courseContentList{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}
.van-cell__value--alone{
  display: flex;
  .left-img{
    width: 75px;
    height: 100px;
    .van-image{
      width: 100%;
      height: 100%;
      ::v-deep .van-image__img{
        border-radius: 5px;
      }
    }
  }
  .right-content{
    flex: 1;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    h3{
      margin: 0;
    }
    p{
      margin: 0;
    }
    .preview{
      flex-grow: 1;
    }
    .price-container{
      .price-discounts{
        color: #ff7452;
      }
      .price{
        text-decoration: line-through;
        margin-left: 5px;
      }
    }
  }
}
</style>
